{% load staticfiles %}
<!DOCTYPE html>
<!-- Template by Quackit.com -->
<html lang="en">
<head>
    <meta charset="utf-8/">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>文章详情</title>

    <!-- Bootstrap Core CSS -->
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles -->

</head>

<body>

    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
        <div class="container">
            <!-- Logo and responsive toggle -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href=" "><span class="glyphicon glyphicon-globe"></span> Logo</a>
            </div>
            <!-- Navbar links -->
            <div class="collapse navbar-collapse" id="navbar">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="/blog/index/">Home</a>
                    </li>
                    <li>
                        <a href=" ">Django</a>
                    </li>
                    <li>
                        <a href=" ">Tornado</a>
                    </li>
                    <li>
                        <a href=" ">Crawler</a>
                    </li>
                    <li>
                        <a href=" ">Basics</a>
                    </li>
					<li class="dropdown">
						<a href=" " class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Others <span class="caret"></span></a>
						<ul class="dropdown-menu" aria-labelledby="about-us">
							<li><a href=" ">Programming World</a></li>
							<li><a href=" ">Poetry and the Distance</a></li>
							<li><a href=" ">The Pots and Pans</a></li>
						</ul>
					</li>    
                </ul>

				<!-- Search -->
				<form class="navbar-form navbar-right" role="search">
					<div class="form-group">
						<input type="text" class="form-control">
					</div>
					<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span> Search</button>
				</form>

            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

<div class="container-fluid">
		<!-- Center Colum -->
		<div class="col-sm-9">		
			<!-- Article -->
			<div class="row">
				<article class="col-xs-12">
					<h2>{{ article.atitle }}</h2>
					<p class="pull-right"><span class="label label-default"></span> <span class="label label-default"></span> <span class="label label-default"></span></p>
					<p><hr></p>
					<p>{{ article.acontent }}</p>
					<p></p>
					<ul class="list-inline">
                        <li>{{ article.apub_time }}</li>
						<li><a href=""><span class="glyphicon glyphicon-comment"></span> {{ article.acomment_num }} 评论</a></li>
						<li><a href="/blog/keep/{{ article.id }}/"><span class="glyphicon glyphicon-star-empty"></span>{{ article.akeep_num }} 收藏</a></li>
						<li><a href=""><span class="glyphicon glyphicon-thumbs-up"></span>{{ article.apoll_num }} 点赞</a></li>
					</ul>
				</article>
			</div>			
			<hr>
			
			<!-- Comments -->
			<h3>评论:</h3>
			<hr>
            {% for comment in comments %}
			<div class="row">
				<article class="col-xs-12">
					<p class="pull-right"><span class="label label-primary">{{ comment.date }}</span> <span class="label label-default">{{ comment.user }}</span></p>
					<p>{{ comment.content }}</p>
				</article>
			</div>			
			<hr>
            {% endfor %}

			<!-- CommentForm   -->
			<div class="row">
				<article class="col-xs-12">
					<h4>添加评论内容:</h4>
					<form action="/blog/comment/{{ article.id }}/" method="post">
                        {% csrf_token %}
                        {{ comment_form.as_p }}
						<input class="btn btn-default" type="submit" value="提交" />
					</form>
				</article>
			</div>			
			<hr>
		</div><!--/Center Column-->


	  <!-- Right Column -->
	  <div class="col-sm-3">
			<!-- Form -->
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">
						<span class="glyphicon glyphicon-user"></span> 
						已登录
					</h3>
				</div>
				<div class="panel-body">					
					<div class="form-group">你好 {{ request.session.uname }} <a href="/blog/logout/">退出</a></div>
				</div>
			</div>
	  </div><!--/Right Column -->

	</div><!--/container-fluid-->
	
    <!-- jQuery -->
    <script src="{% static 'js/jquery-1.11.3.min.js' %}"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
	
	<!-- IE10 viewport bug workaround -->
	<script src="{% static 'js/ie10-viewport-bug-workaround.js' %}"></script>
	
	<!-- Placeholder Images -->
	<script src="{% static 'js/holder.min.js' %}"></script>
	
</body>

</html>
